<template>
  <a-form :form="form">
    <a-form-item
      label="上传标题图片"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol">
      <SquareUpload v-decorator="['serveTitleImg', {rules: [{required: true, message: '请选择图片'}]}]" />
    </a-form-item>
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="姓名"
    >
      <a-input
        v-decorator="[
          'username',
          { rules: [{ required: true, message: '请填写姓名！' }] },
        ]"
        placeholder="请填写姓名"
      />
    </a-form-item>
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="姓名2"
    >
      <a-input
        v-decorator="[
          'username2',
          { rules: [{ required: true, message: '请填写姓名！' }] },
        ]"
        placeholder="请填写姓名"
      />
    </a-form-item>
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="哇哈哈哈"
    >
      <a-input
        v-decorator="[
          'nickname',
          { rules: [{ required: checkNick, message: '请填写哇哈哈哈字段' }] },
        ]"
        placeholder="请填写"
      />
    </a-form-item>
    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-checkbox :checked="checkNick" @change="handleChange"> 哇哈哈哈是必填项 </a-checkbox>
    </a-form-item>
    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-button style="width:100%;" type="primary" @click="check"> 提交 </a-button>
    </a-form-item>
    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-button style="width:100%;" type="primary" @click="getName2"> 获取name2的值 </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import SquareUpload from './formSelfComponent.vue'
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 }
}
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 }
}

export default {
  components: {
    SquareUpload
  },
  data() {
    return {
      checkNick: false,
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { 
        name: 'dynamic_rule'
        // onValuesChange: this.oneChange//某一个值发生变化触发
      })
    }
  },
  methods: {
    check() {
      this.form.validateFields(err => {
        if (!err) {
          console.info('success')
        }
      })
    },
    handleChange(e) {
      this.checkNick = e.target.checked
      this.$nextTick(() => {
        this.form.validateFields(['nickname'], { force: true })
      })
    },
    
    //数据发生变化时触发
    oneChange(a,...arg){
      //第一个参数是 form实体
      //第二个是改变值的这个具体数值
      //第三个值是整体form的值
      console.log(a,...arg)
    },

    // 获取form表单中某一项或者某几项的值
    getName2(e){
      var allValue = this.form.getFieldsValue()

      console.log({'姓名1的值为': this.form.getFieldsValue(['username'])})
      console.log({'姓名1,姓名2的值为': this.form.getFieldsValue(['username','username2'])})
      console.log({'表单全部的值为': allValue})
    }
  }
}
</script>